<template>
  <div class="MyfixedBoxs" v-if="showTem">
    <a-form :form="form">
      <div class="toolBtn">
        <a-button type="primary" class="btn1" @click="okBtn">{{$ti18('rxForm.okBtn','确定')}}</a-button>
        <a-button @click="cancel">{{this.$ti18('rxForm.cancelBtn','取消')}}</a-button>
      </div>
      <a-row>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-radio style="width: 120px" @change="onChangeAll" v-model="allType">{{i18n('list.everyone','所有人')}}</a-radio>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" >
            <a-radio style="width: 120px" @change="onChangeNone" v-model="noneType">{{i18n('list.none','无权限')}}</a-radio>
          </a-form-item>
        </a-col>
        <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" >
                <a-radio style="width: 120px" @change="onChangeShowList" v-model="showList">{{i18n('list.custom','自定义')}}</a-radio>
            </a-form-item>
        </a-col>
      </a-row>
      <template v-if="showList" v-for="(dataObj, index) in typeList">
        <form-user-or-group ref="preview" :dataObj="dataObj"></form-user-or-group>
      </template>
    </a-form>
  </div>
</template>
<script>
  import FormPermissionApi from '@/api/form/core/formPermission'
  import {BaseForm, RxDialog, Dialog} from "@lowcode/jpaas-common-lib";
  import ARow from "ant-design-vue/es/grid/Row";
  import ACol from "ant-design-vue/es/grid/Col";
  import FormUserOrGroup from "./FormUserOrGroup";


  export default {
    name: 'FormUserPermissionEdit',
    mixins: [BaseForm],
    components: {
      ACol,
      ARow,
      RxDialog,
      Dialog,
      FormUserOrGroup
    },
    props: {
      value: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        showList: false,
        typeList: [],
        showTem: true,
        allType: false,
        noneType: false
      }
    },
    created() {
      this.getPermissionList();
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"formPermiss",key);
      },
      onChangeAll(e) {
        if (this.allType) {
          //选择所有人，则清空所有选择
          this.noneType = false;
          this.showList = false;
        }
        this.changeType();
      },
      onChangeNone(e) {
        if (this.noneType) {
          //选择无权限，则清空所有选择
          this.allType = false;
          this.showList = false;
        }
        this.changeType();
      },
      onChangeShowList(e){
          if(this.showList){
              this.noneType = false;
              this.allType = false;
              if(this.attachmentType){
                  this.attachmentList = true;
              }
          }
          this.changeType();
      },
      changeType() {
        for (var i = 0; i < this.typeList.length; i++) {
          var obj = this.typeList[i];
          obj.values = "";
          obj.names = "";
        }
      },
      getPermissionList() {
        FormPermissionApi.getPermissionList().then(res => {
          this.setTypeValue(res.data);
        });
      },
      setTypeValue(data) {
        this.typeList = data;
        if ("everyone" == this.value) {
          this.allType = true;
        } else if ("none" == this.value) {
          this.noneType = true;
        } else if ("custom" == this.value){
          this.showList = true;
        }else {
          var selectObj=JSON.parse(this.value);
          for(var i=0;i<this.typeList.length;i++){
            var typeObj =this.typeList[i];
            var isContinue=false;
            for (var key in selectObj){
              if(key ==typeObj.type){
                typeObj.values=selectObj[key].values;
                typeObj.names=selectObj[key].names;
                typeObj.include=selectObj[key].include;
                isContinue=true;
                break;
              }
            }
            if(isContinue){
              continue;
            }
          }
          this.showList = true;
        }
      },
      okBtn() {
        var resultData = this.getValues();
        this.$emit("input",resultData);
        this.$emit("ok",resultData);
      },

      cancel() {
        this.$emit("ok");
        this.showTem = false;
      },
      getValues() {
        if (this.noneType) {
          var resultData = {
            label: this.i18n('list.none','无权限'),
            key: "none"
          }
          return resultData;
        } else if (this.allType) {
          var resultData = {
            label: this.i18n('list.everyone','所有人'),
            key: "everyone"
          }
          return resultData;
        } else {
          var names = [];
          var typeListObj ={};
          for(var i=0;i<this.typeList.length;i++){
            var typeObj = this.typeList[i];
            if(!typeObj.names){
              continue;
            }
            typeListObj[typeObj.type]={
              names:typeObj.names,
              values:typeObj.values,
              include:typeObj.include
            };
            names.push(typeObj.name+":"+typeObj.names);
          }

          if(names.length>0){
            var resultData = {
              label: names.join(","),
              key: JSON.stringify(typeListObj)
            };
          }else{
            var resultData = {
              label: this.i18n('list.noConfig','无配置'),
              key: "custom"
            };
          }
          return resultData;
        }
      },
    }
  }
</script>

<style scoped>
  .tabButton {
    vertical-align: middle;
    margin-left: 10px;
  }

  .MyfixedBoxs {
    position: absolute;
    background: #fff;
    width: 400px;
    border: 1px solid #ddd;
    border-radius: 6px;
    z-index: 9999;
    padding:15px;
  }
  .toolBtn {
    padding-bottom: 10px;
    text-align: right;
    border-bottom: 1px solid #ddd;
  }

  .btn1 {
    margin-right: 6px;
  }
</style>